import React, { Component, Fragment } from 'react';
import {
  Card,
  Row,
  Col,
  Timeline,
  Descriptions,
} from 'antd';

const { Item } = Descriptions;
interface CabineInfoProps {
  detailInfo: any;
  cabinetInfo: any;
}

class CabineInfoElem extends Component<CabineInfoProps> {
  renderCabineInfoElem = (cabinetInfo: any) => (

    <Card title="柜体信息" bordered={false}>
      <Row gutter={12}>
        <Col md={8} sm={24}>
          <Descriptions column={1}>
            <Item label="主柜数量">{cabinetInfo.masterNum}</Item>
            <Item label="副柜数量">{cabinetInfo.slaveNum}</Item>
            <Item label="信报格口">{cabinetInfo.letterCount}</Item>
            <Item label="格口数量">{cabinetInfo.cellCount}</Item>
          </Descriptions>
        </Col>
        <Col md={16} sm={24}>
          <div className="flexLView">
            <span>柜体编号：</span>
            <div style={{ flex: 1 }}>
              {cabinetInfo.cabCodeList && cabinetInfo.cabCodeList.map((item: any) => (
                <div
                  key={item}
                  style={{ width: '110px', display: 'inline-block', lineHeight: '24px' }}
                >{item }
                </div>
              ))}
              {cabinetInfo.cabCodeList === null && (
                <div>--</div>
              )}
            </div>
          </div>
        </Col>
      </Row>
    </Card>
  )

  renderLogInfoElem = (detailInfo: any) => (
    <Card
      title="日志信息"
      bordered={false}
      style={{ marginBottom: -12 }}
    >
      <Timeline>
        <Timeline.Item>最近操作人：{detailInfo.updateUserName}</Timeline.Item>
        <Timeline.Item>最近操作时间：{detailInfo.updateTime}</Timeline.Item>
        <Timeline.Item>创建人：{detailInfo.createUserName}</Timeline.Item>
        <Timeline.Item>创建时间：{detailInfo.createTime}</Timeline.Item>
      </Timeline>
    </Card>
  )

  render() {
    const { detailInfo, cabinetInfo } = this.props;

    return (
      <Fragment>
        {this.renderCabineInfoElem(cabinetInfo)}
        {detailInfo.updateTime && this.renderLogInfoElem(detailInfo)}
      </Fragment>
    );
  }
}

export default CabineInfoElem;
